<template>
  <nav class="nav">
    <ul>
      <li>
        <router-link active-class="active" to="/home">
          <span></span>
        </router-link>
      </li>
      <li>
        <router-link active-class="active" to="/achievement">
          <span></span>
        </router-link>
      </li>
      <li>
        <router-link active-class="active" to="/community">
          <span></span>
        </router-link>
      </li>
      <li>
        <router-link active-class="active" to="/follow">
          <span></span>
        </router-link>
      </li>
      <li>
        <router-link active-class="active" to="/self">
          <div class="mine">
            <img src="../assets/user/personal.png" alt="">
          </div>
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
    name: "appNav",
};
</script>

<style lang="scss" scoped>
nav {
    width: 100%;
    height: 80px;
    background-color: #171717;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    ul {
      width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        li {
          width: 50px;
          &:nth-child(1) {
            a {
              font-size: 18px;
              color: rgba(255, 255, 255, 0.658);
              &.active {
                color: white;
                span {
                  background-image: url(../assets/ui/home_fill.png);
                }
              }
              span {
                width: 28px;
                height: 28px;
                display: block;
                margin: 0 auto;
                background-image: url(../assets/ui/home.png);
                background-size: cover;
                background-repeat: no-repeat;
              }
            }
          }
          &:nth-child(2) {
            a {
              font-size: 18px;
              color: rgba(255, 255, 255, 0.658);
              &.active {
                color: white;
                span {
                  background-image: url(../assets/ui/achievement_fill.png);
                }
              }
              span {
                width: 28px;
                height: 28px;
                display: block;
                margin: 0 auto;
                background-image: url(../assets/ui/achievement.png);
                background-size: cover;
                background-repeat: no-repeat;
              }
            }
          }
          &:nth-child(3) {
            a {
              font-size: 18px;
              color: rgba(255, 255, 255, 0.658);
              &.active {
                color: white;
                span {
                  background-image: url(../assets/ui/community_fill.png);
                }
              }
              span {
                width: 30px;
                height: 30px;
                display: block;
                margin: 0 auto;
                background-image: url(../assets/ui/community.png);
                background-size: cover;
                background-repeat: no-repeat;
              }
            }
          }
          &:nth-child(4) {
            a {
              font-size: 18px;
              color: rgba(255, 255, 255, 0.658);
              &.active {
                color: white;
                span {
                  background-image: url(../assets/ui/follow_fill.png);
                }
              }
              span {
                width: 28px;
                height: 28px;
                display: block;
                margin: 0 auto;
                background-image: url(../assets/ui/follow.png);
                background-size: contain;
                background-repeat: no-repeat;
              }
            }
          }
          &:nth-child(5) {
            a {
              font-size: 18px;
              color: rgba(255, 255, 255, 0.658);
              &.active {
                color: white;
                .mine {
                  border: 2px solid white;
                }
              }
              .mine {
                width: 32px;
                height: 32px;
                margin: 0 auto;
                border: 3px solid transparent;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                  width: 30px;
                  height: 30px;
                  border: 1px solid transparent;
                  box-sizing: border-box;
                  border-radius: 50%;
                  overflow: hidden;
                }
              }
            }
          }
        }
    }
}
</style>